<template>
  <div id="through_pass_total">
  </div>
</template>

<script>
  import { Column } from '@antv/g2plot';
  export default {
    name: "CrossesTotal",
    props:{
      recoveriesData:{
        type: Array
      },
      recoveries:{
        type:Number
      }
    },
    mounted() {
      // const data = [{"Goals":0,"number":479},{"Goals":0.1,"number":2},{"Goals":0.2,"number":24},{"Goals":0.3,"number":31},{"Goals":0.4,"number":18},{"Goals":0.5,"number":12},{"Goals":0.6,"number":8},{"Goals":0.7,"number":4},{"Goals":0.8,"number":7},{"Goals":0.9,"number":5},{"Goals":1,"number":1},{"Goals":1.2,"number":1},{"Goals":1.3,"number":1},{"Goals":1.4,"number":1},{"Goals":1.5,"number":1},{"Goals":1.6,"number":1},{"Goals":1.7,"number":2},{"Goals":1.8,"number":1},{"Goals":3.6,"number":2},{"Goals":5.3,"number":1}];
      const data = [
            {
              "through_ball": 0,
              "number": 398
            },
            {
              "through_ball": 0.1,
              "number": 58
            },
            {
              "through_ball": 0.2,
              "number": 22
            },
            {
              "through_ball": 0.3,
              "number": 8
            },
            {
              "through_ball": 0.4,
              "number": 1
            },
            {
              "through_ball": 0.5,
              "number": 1
            },
            {
              "through_ball": 0.6,
              "number": 1
            },
            {
              "through_ball": 0.8,
              "number": 2
            }
          ]
      // const data = this.recoveriesData;
      const column = new Column('through_pass_total', {
        data,
        width: 200,
        height: 150,
        // autoFit:false,
        xField: 'through_ball',
        yField: 'number',
        xAxis: {
          label: {
            formatter:(through_ball)=>{
              if(through_ball==='0.8次') {
                return through_ball.slice(0,through_ball.length-1)
              }
              return null
            },
            autoHide:false,
            autoRotate: false,
            // position:'left'
          },
          tickLine:null,
          title:null,
          line:null,
          subTickLine:null,
          grid:null,
        },
        yAxis:{
          label:{
            formatter:(number)=>{
              return parseFloat(number)
            },
          },
          title:null,
        },
        meta:{
          through_ball: {
            alias:'传中总数',
            formatter:(v)=>{
              return v + '次'
            }
          },
          number: {
            alias:'球员人数',
            formatter:(v)=>{
              return v + '人'
            }
          },
        },
        // maxColumnWidth: 20,
        title: {
          visible: true,
          text: '直传总数/90',
          style:{
            fontSize: 14,
            fill: 'red',
          }
        },
        // colorField: 'through_ball',
        // 如果需要特殊对某个值设置颜色就不能够设置colorField
        color:({through_ball})=>{
          if(through_ball === 0.2){
            return '#29a5da';
          }
          return '#DCF1FA';
        },
        columnStyle:{

        },
        minColumnWidth: 2,
        maxColumnWidth:50,
        // columnSize:15,
        columnWidthRatio:1,
        legend:{
          visible: false
        },
        tooltip:{
          fields:['through_ball','number',],
          domStyles:{
            'g2-tooltip':{
              width: '150px',
              height:'60px'
            },
            'g2-tooltip-title':{
              display:'none'
            },
            'g2-tooltip-list-item':{
              width:'150px',
              // height:'30px',
              display: 'flex',
              justifyContent:'flexStart'
            },
            'g2-tooltip-marker':{
              marginTop:'3px'
            }
          },
        },
      });
      column.render();
    }
  }
</script>

<style scoped>
  #through_pass_total {
    margin-top: -1px;
    width: 200px;
    height: 150px;
  }
</style>